<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>演示：jQuery仿淘宝商品多属性查询</title>
    <style type="text/css">
        *{margin:0;padding:0;list-style-type:none;}
        a,img{border:0;}
        body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";background: #f9f9f9;}

        .select{padding:5px 10px;border:#ddd 1px solid;border-radius:4px;width:60%;margin:5% auto;font-size:12px}
        .select li{list-style:none;padding:10px 0 5px 100px}
        .select .select-list{border-bottom:#eee 1px dashed}
        .select dl{zoom:1;position:relative;line-height:24px;}
        .select dl:after{content:" ";display:block;clear:both;height:0;overflow:hidden}
        .select dt{width:100px;margin-bottom:5px;position:absolute;top:0;left:-100px;text-align:right;color:#666;height:24px;line-height:24px}
        .select dd{float:left;display:inline;margin:0 0 5px 5px;}
        .select a{display:inline-block;white-space:nowrap;height:24px;padding:0 10px;text-decoration:none;color:#039;border-radius:2px;}
        .select a:hover{color:#f60;background-color:#f3edc2}
        .select .selected a{color:#fff;background-color:#f60}

        .select-result dt{font-weight:bold}
        .select-no{color:#999}
        .select .select-result a{padding-right:20px;background:#f60 url("close.gif") right 9px no-repeat}
        .select .select-result a:hover{background-position:right -15px}
    </style>

</head>
<body>

<ul class="select" id="ul_select">
    <li class="select-list">
        <dl id="select1" class="dl">
            <dt>上装：</dt>
            <dd class="select-all selected"><a href="#">全部</a></dd>
            <dd><a href="#">针织衫</a></dd>
            <dd><a href="#">毛呢外套</a></dd>
            <dd><a href="#">T恤</a></dd>
            <dd><a href="#">羽绒服</a></dd>
            <dd><a href="#">棉衣</a></dd>
            <dd><a href="#">卫衣</a></dd>
            <dd><a href="#">风衣</a></dd>
        </dl>
    </li>
    <li class="select-list">
        <dl id="select2" class="dl">
            <dt>裤装：</dt>
            <dd class="select-all selected"><a href="#">全部</a></dd>
            <dd><a href="#">牛仔裤</a></dd>
            <dd><a href="#">小脚/铅笔裤</a></dd>
            <dd><a href="#">休闲裤</a></dd>
            <dd><a href="#">打底裤</a></dd>
            <dd><a href="#">哈伦裤</a></dd>
        </dl>
    </li>
    <li class="select-list">
        <dl id="select3" class="dl">
            <dt>裙装：</dt>
            <dd class="select-all selected"><a href="#">全部</a></dd>
            <dd><a href="#">连衣裙</a></dd>
            <dd><a href="#">半身裙</a></dd>
            <dd><a href="#">长袖连衣裙</a></dd>
            <dd><a href="#">中长款连衣裙</a></dd>
        </dl>
    </li>
    <li class="select-result">
        <dl id="dl_result">
            <dt>已选条件：</dt>
            <dd class="select-no">暂时没有选择过滤条件</dd>
        </dl>
    </li>
</ul>

<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
<script type="text/javascript">
    $(function() {
        $("#ul_select").find(".dl").children("dd").click(function() { //每个商品分类行绑定点击事件
            $(this).addClass("selected").siblings("dd").removeClass("selected"); //当前元素选中，其余删除选中样式
            var index = $(this).parents(".select-list").index();//获取父级索引index
            var goods = $(this).children("a").text();//获取当前商品名称
            $("#select_" + index).remove();//删除当前索引的筛选
            if (goods != '全部') { //若不是全部 在筛选区域添加商品
                $("#dl_result").append("<dd id='select_" + index + "' class='selected' onclick=removeChose($(this),'" + index + "')><a href='#'>" + goods + "</a></dd>");
            }
            getResult();
        })
    });
    function removeChose(obj, index) { //删除筛选
        $("#ul_select").children(".select-list").eq(index).find(".selected").removeClass("selected");//删除商品选中样式
        $("#ul_select").children(".select-list").eq(index).find("dd").eq(0).addClass("selected");//给全部添加选中样式
        obj.remove();//当前按钮删除
        getResult();
    }
    function getResult() { //结果处理
        var len_chose = $("#dl_result").children(".selected").length;
        if (len_chose > 0) { //若是筛选区域选中项大于0
            $(".select-no").hide();//暂时没有选择过滤条件 隐藏
        } else {
            $(".select-no").show();//暂时没有选择过滤条件 显示
        }
    }
</script>
</body>
</html>